<template>
  <Modal id="evaluation-modal"
         v-model="visible"
         width="800px"
         okText="发表评论"
         @on-cancel="resetEvaluation">
    <p class="title">请对课堂做出评价</p>

    <div class="rate-star">
      <div class="rate-star-line rate-star-line1">
        <span>评分</span>
        <Rate show-text
              v-if="scoreContentsList&&scoreContentsList.length>0"
              allow-half
              :disabled="scoreContentsList&&scoreContentsList.length>0"
              v-model="scoreContentsList[0].score/2||0">
          <span style="color: #f5a623">{{ scoreContentsList[0].score ||0}}</span>
        </Rate>
        <Rate show-text
              v-else
              allow-half
              v-model="selectScore">
          <span style="color: #f5a623">{{ selectScore*2}}</span>
        </Rate>
        <Button type="primary"
                v-if="scoreContentsList&&scoreContentsList.length==0&&btnShow"
                @click="savaRate">保存</Button>
      </div>
      <div>
        <Tag :checkable="scoreContentsList&&scoreContentsList.length==0"
             color="primary"
             :checked="item.checked&&item.checked==true?true:false"
             @click.native="(e)=>{tagClick(e,item)}"
             v-for="(item,index) in contentList"
             :key="item.contentId">{{item.content}}</Tag>
      </div>
    </div>

    <editor class="editor"
            ref="editor"
            :value="content"
            @on-change="handleChange" />
    <div slot="footer"
         class="footer">
      <Upload v-if="0"
              action="//jsonplaceholder.typicode.com/posts/">
        <Button type="primary"
                v-if="0">上传附件</Button>
      </Upload>
      <!-- <Button type="primary"  :loading="modal_loading" @click="upload">上传附件</Button> -->
      <Button type="primary"
              :loading="modal_loading"
              @click="sendContent">发表评论</Button>
    </div>
  </Modal>
</template>
<script>
import Editor from '_c/editor'
import { mapState } from 'vuex'
import { getCourseDetailInfo, saveCommentInfo, deleteCommentInfo, saveEvaluationContent } from '@/api/data'
export default {
  props:['userId'],
  data () {
    return {
      visible: false,
      valueText: 5,
      modal_loading: false,
      content: '',
      liveData: {},
      score: 0,
      scoreContentsList: [],
      scoreItemNumList: [],
      selectScore: 5,
      contentIds: [],
      contentList: [],
      btnShow: true
    }
  },
  computed: {
    ...mapState({
      // userId: state => state.user.userId,
      roleId: state => state.user.roleId
    }),
  },
  methods: {
    init (id) {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs.editor.setHtml('' + id)
      })
    },
    handleChange (html, text) {
    },
    upload () { },
    // 重置评价弹窗
    resetEvaluation(){
      this.$refs.editor.setHtml('')
      this.visible = false
    },
    sendContent () {
      let data = {
        "content": this.$refs.editor.getHtml(),
        "courseId": this.liveData.courseId,
        "parentId": '',
        "roleId": this.roleId,
        "userId": this.userId
      }
      saveCommentInfo(data).then((res) => {
        if (res.data == true) {
          this.$Message.success('发表评论成功')
          this.$refs.editor.setHtml('')
          this.visible = false
        } else {
          this.$Message.error('发表评论失败')
        }
      })
    },
    tagClick (e, item) {
      let index = Array.from(e.target.classList).indexOf('ivu-tag-color-white')
      if (index < 0) {
        let y = this.contentIds.indexOf(item.contentId)
        if (y < 0) {
          this.contentIds.push(item.contentId)
        }
      } else {
        let i = this.contentIds.indexOf(item.contentId)
        if (i >= 0) {
          this.contentIds.splice(i, 1)
        }
      }
    },
    getList () {
      let data = {
        "courseId": this.liveData.courseId,
        // "courseName": this.list.courseName,
        "courseType": '0',
        "userId": this.userId
        // "orderName": ""
      }
      getCourseDetailInfo(data).then((res) => {
        if (res.data) {
          this.scoreContentsList = res.data.scoreContentsList
          this.score = res.data.courseList[0].score / 2
          this.playTimes = res.data.courseList[0].playTimes
          this.praiseRate = res.data.praiseRate
          this.courseList = res.data.courseList
          this.contentList = res.data.contentList
          this.courseDetailInfo = res.data.courseList
          this.studentCommentList = res.data.studentCommentList
          this.expertCommentList = res.data.expertCommentList
          this.scoreItemNumList = res.data.scoreItemNumList
          this.studentCommentList.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') +
              'images/photo/' + item.photo
          })
          this.contentList.forEach((item, index) => {
            item.checked = false
            if (this.scoreContentsList && this.scoreContentsList.length > 0) {
              this.scoreContentsList.forEach((it) => {
                if (item.contentId == it.contentId) {
                  item.checked = true
                }
              })
            }
          });
        }
      })
    },
    savaRate () {
      if (this.contentIds && this.contentIds.length == 0) {
        this.$Message.error('请选择标签')
        return
      }
      let data = {
        courseId: this.liveData.courseId,
        userId: this.userId,
        roleId: this.roleId,
        score: this.selectScore * 2,
        contentIdList: this.contentIds
      }
      saveEvaluationContent(data).then(res => {
        if (res.data) {
          this.$Message.success('评分成功')
          this.btnShow = false
        }
      })
    },
  },
  mounted () {
    this.liveData = JSON.parse(sessionStorage.getItem("liveData"))
    this.getList()
    console.log('userId值为：' +this.userId)
  },
  components: {
    Editor
  }
}
</script>
<style lang="scss">
#evaluation-modal {
  .ivu-modal-mask {
    z-index: 10000000000 !important;
  }
  .ivu-modal-wrap {
    z-index: 10000000000 !important;
  }
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
  }
  .ratestar {
    width: 100%;
    & > li {
      display: flex;
      width: 100%;
      & > span {
        flex: 1;
        width: 50%;
        padding: 0 5px;
        &:first-of-type {
          text-align: right;
          line-height: 32px;
        }
      }
    }
  }
  .editor {
    height: 230px !important;
    overflow: hidden;
    .w-e-toolbar{
      height: 30px !important;
    }
    .w-e-text-container {
      height: 200px !important;
    }
  }
  .footer {
    position: relative;
    padding-top: 34px;
    .ivu-upload {
      display: inline-block;
      .ivu-upload-list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        .ivu-upload-list-file {
          float: left;
          width: 20%;
        }
      }
    }
  }
}
</style>
